<template>
  <div class="login-wrap">
    <div class="login">
      <h3 class="title">注册</h3>

      <!-- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.account')">
            <template #prefix>
              <svg-icon name="user" class="input-icon" />
            </template>
</el-input>
</el-form-item>
<el-form-item prop="password">
  <el-input v-model="loginForm.password" show-password type="password" auto-complete="off"
    :placeholder="$t('login.password')" @keyup.enter="handleLogin">
    <template #prefix>
              <svg-icon name="password" class="input-icon" />
            </template>
  </el-input>
</el-form-item>
<el-form-item prop="checkPassword">
  <el-input v-model="loginForm.password" show-password type="checkPassword" auto-complete="off"
    :placeholder="$t('login.password')" @keyup.enter="handleLogin">
    <template #prefix>
              <svg-icon name="password" class="input-icon" />
            </template>
  </el-input>
</el-form-item>

<el-form-item style="width: 100%" :style="{ 'margin-top': captchaOnOff == 'off' ? '40px' : '' }">
  <el-button :loading="loading" size="default" round type="primary" style="width: 100%" @click.prevent="handleLogin">
    <span v-if="!loading">{{ $t('login.register') }}</span>
    <span v-else>登 录 中...</span>
  </el-button>
</el-form-item>

<div style="display: flex; justify-content: space-between; align-items: center">
  <el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
  <span style="font-size: 12px">
    <router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
    <span @click="handleForgetPwd()" class="forget-pwd">{{ $t('login.forgotPwd') }}</span>
  </span>
</div>
</el-form> -->
      <el-form
        ref="ruleFormRef"
        style="max-width: 500px; margin-left: 20%"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <el-form-item prop="age">
          <el-input
            style="width: 300px"
            v-model.number="ruleForm.account"
            placeholder="请输入账号名"
          >
            <template #prepend>
              <el-button :icon="User"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            style="width: 300px"
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
            placeholder="请输入密码"
          >
            <template #prepend>
              <el-button :icon="Lock"></el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input
            style="width: 300px"
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
            placeholder="请输入确认密码"
          >
            <template #prepend>
              <el-button :icon="Lock"></el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item style="justify-content: space-between; margin-right: 40%">
          <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <starBackground></starBackground>
</template>

<script setup lang="ts">
import { Lock, User } from '@element-plus/icons-vue'
// // 验证码开关
// const captchaOnOff = ref('')
// const loading = ref(false)
// const loginForm = ref({
//   username: '',
//   password: '',
//   rememberMe: false,
//   code: '',
//   uuid: ''
// })
// const loginRules = {
//   username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
//   password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
//   code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
// }

// function handleLogin() {
//   console.log('登录')
// }

// function handleForgetPwd() {
//   console.log('忘记密码')
// }
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { UserControllerService } from '../../../generated'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const ruleFormRef = ref<FormInstance>()

const router = useRouter()

const checkAge = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 18) {
        callback(new Error('Age must be greater than 18'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (ruleForm.checkPass !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== ruleForm.password) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  password: '',
  checkPass: '',
  account: ''
})

const rules = reactive<FormRules<typeof ruleForm>>({
  password: [{ validator: validatePass, trigger: 'blur' }],
  checkPass: [{ validator: validatePass2, trigger: 'blur' }],
  account: [{ validator: checkAge, trigger: 'blur' }]
})
/**
 * 注册
 * @param formEl
 */
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      console.log('submit!')
      const user = {
        checkPassword: ruleForm.checkPass,
        userAccount: ruleForm.account,
        userPassword: ruleForm.password
      }
      const res = await UserControllerService.userRegisterUsingPost(user)
      if (res.code === 0) {
        ElMessage({
          showClose: true,
          message: '注册成功',
          type: 'success'
        })

        await router.push({
          path: '/login'
        })
      } else {
        ElMessage({
          showClose: true,
          message: res.message,
          type: 'error'
        })
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>
<style lang="scss" scoped>
@import '../../assets/styles/login';

form {
  width: 500px;

  button {
    margin: 0 10% 0 20%;
  }
}

input {
  width: 300px;
}
</style>